<template>
  <div class="list">
    <scroll-view
      class="scroll-wrap no-scroll-bar"
      scroll-y
      style="height:calc(100% - 42px - 36px)"
      @scrolltolower="handleLoadMore"
    >
      <div
        class="shopsList"
        v-for="(item,index) in list"
        :key="index"
        @click="shopInfo(item.customerId)"
      >
        <div class="shopsListLeft">
          <div class="shopsImgBox">
            <img :src="item.avatar" alt>
          </div>
          <div class="shopsCont">
            <span>会员编号：{{item.customerId}}</span>
            <span>会员名称：{{item.realName === null || '' ? '无' : item.realName}}</span>
            <div>
              <label>{{item.createDate}}</label>
            </div>
          </div>
        </div>
        <div class="shopsIcoBox">
          <span
            :class="item.state === '0' ? 'spanYes' : 'spanNo'"
          >{{item.state === '0' ? '已认证' : '未认证'}}</span>
          <img src="/static/assets/icon/xzlm.png" alt>
        </div>
      </div>
      <div v-if="alreadyLastPage" class="listHiti">没有更多了</div>
    </scroll-view>
  </div>
</template>

<script>
import { FIND_CUSTOMER_PAGE_API } from '@/api'

export default {
  components: {},

  data () {
    return {
      pageNo: 1,
      pageSize: 10,
      arrpages: 0,
      list: [],
      alreadyLastPage: false
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    lists () {
      return this.list.map(_ => _)
    }
  },
  onShow () {
    this.list = []
    this.pageNo = 1
    this.alreadyLastPage = false
    // if (!this.alreadyLastPage) {
    this._getVipAdminData()
    // }
  },
  methods: {
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.moreFunction()
      }
    },
    shopInfo (value) {
      this.$router.push(
        '/pages/shop-management/vip-admin-info/main?customerId=' + value
      )
    },
    _getVipAdminData () {
      const vm = this
      let params = {
        shopId: vm.account.shopId
      }
      FIND_CUSTOMER_PAGE_API(params, vm.pageNo, vm.pageSize)
        .then(r => {
          if (r.data.code === '0') {
            vm.arrpages = r.data.data.pages
            if (r.data.data.total === 0) {
              vm.alreadyLastPage = true
              vm.list = []
            } else {
              vm.alreadyLastPage = false
              let { list } = r.data.data
              // vm.list.push(r.data.data.list)
              list.forEach(_ => {
                vm.list.push({ ..._ })
              })
            }
            // let { list, isFirstPage, isLastPage } = r.data.data
            // vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 请求列表
    moreFunction () {
      if (this.pageNo <= this.arrpages) {
        this.pageNo += 1
        this._getVipAdminData()
      } else {
        this.alreadyLastPage = true
      }
    }
    // printList (list, isFirst, isLast) {
    //   if (isFirst) {
    //     this.list = list
    //     if (isLast || !list.length) {
    //       // only one page
    //       this.alreadyLastPage = true
    //     } else {
    //       // has next page
    //       this.alreadyLastPage = false
    //       this.currentPage += 1
    //     }
    //   } else if (isLast) {
    //     // more than one page and this is the last page
    //     this.list.push(...list)
    //     this.alreadyLastPage = true
    //   } else {
    //     // middle page
    //     this.list.push(...list)
    //     this.alreadyLastPage = false
    //     this.currentPage += 1
    //   }
    // }
  }
}
</script>

<style lang="scss">
.list {
  height: calc(100% - 120px);
  > .scroll-wrap {
    height: calc(100% - 70px);
    box-sizing: border-box;
    padding: 0 15px;
    .shopsList {
      width: 350px;
      height: 60px;
      margin: 25px auto 0;
      display: flex;
      justify-content: space-between;
      .shopsListLeft {
        display: flex;
        .shopsImgBox {
          img {
            width: 60px;
            height: 60px;
          }
        }
        .shopsCont {
          width: 230px;
          font-size: 14px;
          line-height: 14px;
          color: #000;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 5px;
          div {
            display: flex;
            justify-content: space-between;
            label {
              color: #a2a2a2;
            }
            .stateColor {
              color: #f0ae27;
            }
            .stateColor2 {
              color: #3a7f3e;
            }
          }
        }
      }
      .shopsIcoBox {
        display: flex;
        justify-content: center;
        align-items: center;
        .spanNo {
          font-size: 14px;
          color: #a2a2a2;
        }
        .spanYes {
          font-size: 14px;
          color: #459a38;
        }
        img {
          margin-left: 5px;
          width: 5px;
          height: 10px;
        }
      }
    }
    .listHiti {
      width: 100%;
      height: 50px;
      font-size: 14px;
      color: #666;
      text-align: center;
      line-height: 50px;
    }
  }
}
</style>
